<!-- 通用查询模板使用示例 -->
<template>
  <query-template
    page-title="出库记录"
    main-table-title="出库单列表"
    detail-table-title="出库明细表"
    :query-api="queryApi"
    :detail-api="detailApi"
    :main-table-columns="mainTableColumns"
    :detail-table-columns="detailTableColumns"
    :custom-params="customParams"
    :custom-form-data="customFormData"
    show-custom-filters
    :data-formatter="dataFormatter"
    :detail-data-formatter="detailDataFormatter"
  >
    <!-- 自定义筛选条件插槽 -->
    <template #custom-filters="{ formData, handleCustomFilterChange }">
      <view class="query-picker">
        <picker
          mode="selector"
          :range="statusOptions"
          range-key="text"
          :value="statusIndex"
          @change="handleStatusChange"
        >
          <view class="picker-content">
            <text class="picker-label">状态:</text>
            <text class="picker-value">{{ statusOptions[statusIndex]?.text || '请选择' }}</text>
            <text class="picker-arrow">▼</text>
          </view>
        </picker>
      </view>
    </template>
  </query-template>
</template>

<script>
// 导入通用查询模板
import QueryTemplate from "@/pages/smart/utils/query.vue";
import { reverseApi } from "@/api/warehouse/reverse";

export default {
  name: "StockOutReportExample",
  components: {
    QueryTemplate
  },
  data() {
    return {
      // 状态选项
      statusOptions: [
        { text: "全部", value: "" },
        { text: "已完成", value: "COMPLETED" },
        { text: "进行中", value: "IN_PROGRESS" },
        { text: "已取消", value: "CANCELLED" }
      ],
      statusIndex: 0,
      // 当前状态值
      currentStatus: "",
      // 自定义表单数据
      customFormData: {
        status: ""
      },
      // 自定义查询参数
      customParams: {
        // 这里可以添加额外的查询参数
      },
      // 主表列配置
      mainTableColumns: [
        {
          title: "创建时间",
          dataIndex: "createTime",
          dataType: "date"
        },
        {
          title: "创建人",
          dataIndex: "creator",
          defaultValue: "-"
        },
        {
          title: "供应商",
          dataIndex: "suppName",
          defaultValue: "-"
        },
        {
          title: "出库类型",
          dataIndex: "outType",
          defaultValue: "-"
        },
        {
          title: "出库单号",
          dataIndex: "mainNo",
          defaultValue: "-"
        }
      ],
      // 明细表列配置
      detailTableColumns: [
        {
          title: "物料编码",
          dataIndex: "materialCode",
          defaultValue: "-"
        },
        {
          title: "物料名称",
          dataIndex: "materialName",
          defaultValue: "-"
        },
        {
          title: "规格",
          dataIndex: "specification",
          defaultValue: "-"
        },
        {
          title: "数量",
          dataIndex: "transCount",
          dataType: "number",
          defaultValue: 0
        },
        {
          title: "重量(KG)",
          dataIndex: "prodCount",
          dataType: "number",
          precision: 3,
          defaultValue: 0
        },
        {
          title: "单价",
          dataIndex: "prodPrice",
          dataType: "number",
          defaultValue: 0
        },
        {
          title: "金额",
          dataIndex: "amount",
          dataType: "number",
          precision: 2,
          formatter: (value, item) => {
            const weight = parseFloat(item.prodCount || 0);
            const price = parseFloat(item.prodPrice || 0);
            return (weight * price).toFixed(2);
          }
        }
      ]
    };
  },
  methods: {
    /* 状态选择处理 */
    handleStatusChange(e) {
      this.statusIndex = e.detail.value;
      this.currentStatus = this.statusOptions[this.statusIndex].value;
      
      // 更新自定义表单数据
      this.customFormData = {
        ...this.customFormData,
        status: this.currentStatus
      };
    },
    // 查询API方法
    queryApi(params) {
      return reverseApi.getPoStockOutMainPage(params);
    },
    // 明细查询API方法
    detailApi(mainId) {
      return reverseApi.getPoStockOut(mainId);
    },
    // 主表数据格式化函数（可选）
    dataFormatter(data) {
      // 可以在这里对主表数据进行额外处理
      return data;
    },
    // 明细数据格式化函数（可选）
    detailDataFormatter(data) {
      // 可以在这里对明细数据进行额外处理
      return data;
    }
  }
};
</script>

<style lang="scss" scoped>
/* 可以在这里添加页面特定的样式 */
</style>